<template>
  <div>
    <div class="container">
      <div class="nav-wan">首页>题库>一级建造师>建筑工程管理>万人模考</div>
      <div class="content-wan" v-if="sjInfo">
        <div class="title-wan">{{sjInfo.sj_name}}</div>
        <div class="bord-wan">
          <div class="top">
            <div class="left">
              <div style="margin-bottom: 10px">年份：{{sjInfo.year}}年</div>
              <div>试题总分：{{sjInfo.fz}}分</div>
            </div>
            <div class="right">
              <div style="margin-bottom: 10px">考试时间：{{sjInfo.sc}}分钟</div>
              <div>试卷难度：<Rate disabled v-model="sjInfo.nd" /></div>
            </div>
          </div>
          <div class="midel">
            <h2 class="title">题型介绍:</h2>
            <p>
              {{sjInfo.sj_jj}}
            </p>
            
          </div>
          <div class="bottom">
            <div class="mans">已有<span>{{sjInfo.bmNum}}人</span>报名参加</div>
            <span @click="goexam" class="btn">{{sj_obj.utzt=="2"?"继续考试":"开始考试"}}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      sjInfo:null,
      RateValue: 3,
      sj_obj: JSON.parse(sessionStorage.getItem("wrObj")),
    };
  },
  methods: {
    // 试卷信息
    stInfo(){
      let obj={
        token:this.$store.state.$user.token,
        sj_id:this.sj_obj.id
      }
      this.$api.paper.stInfo(obj).then(res=>{
        if(res.data.event!="100") return
        this.sjInfo=res.data.data
      })
    },
  
    goexam() {
      this.$router.replace({
        name: "paperExam",
        params: {
          product_id: this.sj_obj.lb_id,
          paper_id: this.sj_obj.id,
          st_lx: "5",
        },
      });
    },
  },
  created() {
    this.stInfo()
  },
   beforeRouteLeave(to, from, next) {
    if (to.name != "AllPaper"&&to.name != "paperExam") {
      sessionStorage.removeItem("wrlists");
    }
    next();
  },
};
</script>

<style lang="scss" scoped>
.nav-wan {
  height: 20px;
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #333333;
  line-height: 20px;
  margin: 10px 0;
}
.content-wan {
  width: 1240px;
  height: 504px;
  background: #ffffff;
  .title-wan {
    text-align: center;
    padding: 30px 0 20px;
    border-bottom: 1px solid rgba(51, 51, 51, 0.1);
    font-size: 18px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #333333;
    line-height: 25px;
  }
  .bord-wan {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    margin-top: 50px;
    .top {
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 50px;
      .left,
      .right {
        display: flex;
        align-items: flex-end;
        justify-content: center;
        flex-direction: column;
      }
      .right {
        align-items: flex-start;
      }
      .left {
        margin-right: 100px;
      }
    }
    .midel {
      margin-bottom: 90px;
      h2 {
        height: 20px;
        font-size: 14px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #333333;
        line-height: 20px;
        margin-bottom: 10px;
      }
      p {
        width: 845px;
        font-size: 14px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #333333;
        line-height: 26px;
      }
    }
    .bottom {
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      .mans {
        height: 20px;
        font-size: 14px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #333333;
        line-height: 20px;
        span {
          color: #ff6900;
        }
      }
      .btn {
        width: 254px;
        height: 46px;
        background: linear-gradient(270deg, #ff6900 0%, #ffab70 100%);
        border-radius: 4px;
        font-size: 14px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #ffffff;
        line-height: 46px;
        text-align: center;
        margin-top: 10px;
        cursor: pointer;
      }
    }
  }
}
</style>